<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>幸运抽奖</title>
		<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />

		<link rel="stylesheet" href="css/luckDraw.css" />
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script src="js/moduls/prize.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/moduls/islogin.js" ></script>
		<script type="text/javascript" src="js/adapter.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>

	<body>
		<div class="content">
			<div class="logo">
				<img src="img/logo.png" />
			</div>
			<div class="theme">
				<img src="img/theme.png" />
			</div>
			<div class="subTop">
				<div class="picture">
					<img src="img/title2.png" />
				</div>

			</div>
			<div class="back">
				<div class="backBtn">
					<a href="javascript:history.go(-1)"><img src="img/closeBtn.png" /></a>
				</div>

			</div>
			<div class="middlePath">

				<div class="title">
					<img src="img/luckDraw.png" />
				</div>
				<div class="drawContent">
					<div class="circle-img1 frame"><img src="img/luckDraw/rowCircle.png" /></div>
					<div class="circle-img2 frame"><img src="img/luckDraw/rowCircle.png" /></div>
					<div class="circle-img3 frame"><img src="img/luckDraw/colCircle.png" /></div>
					<div class="circle-img4 frame"><img src="img/luckDraw/colCircle.png" /></div>
					<div class="drawCenter">
						<table>
							<tr>
								<td>
									<div class="prizeItem">
										<span>奖品一</span></br>
										<span>实物</span>
									</div>
									<div class="prizeBg" data-num="0"></div>
								</td>
								<td>
									<div class="prizeItem">
										<span>奖品二</span></br>
										<span>红包</span>
									</div>
									<div class="prizeBg" data-num="1"></div>
								</td>
								<td>
									<div class="prizeItem">
										<span>奖品三</span><br/>
										<span>荷石币/道具</span>

									</div>
									<div class="prizeBg" data-num="2"></div>
								</td>
							</tr>
							<tr>
								<td>
									<div class="prizeItem">
										<span>奖品四</span>

									</div>
									<div class="prizeBg" data-num="3"></div>
								</td>
								<td>
									<div class="centerBg"><img src="img/luckDraw/centerBg.png" /></div>
								</td>
								<td>
									<div class="prizeItem">
										<span>奖品五</span>

									</div>
									<div class="prizeBg" data-num="4"></div>
								</td>
							</tr>
							<tr>
								<td>
									<div class="prizeItem">
										<span>奖品六</span>

									</div>
									<div class="prizeBg" data-num="5"></div>
								</td>
								<td>
									<div class="prizeItem">
										<span>奖品七</span>

									</div>
									<div class="prizeBg" data-num="6"></div>
								</td>
								<td>
									<div class="prizeItem">
										<span>奖品八</span><br/>

									</div>
									<div class="prizeBg" data-num="7"></div>
								</td>
							</tr>
						</table>
					</div>
				</div>
			</div>

			<div class="bottom-logo">
				<img src="img/bottom_logo2.png" />
			</div>
		</div>
	</body>
	<script>
		var t_index = 0;
		var t_array = [0, 1, 2, 4, 7, 6, 5, 3];
		var circle = 3;
		var t_circle = 0;
		var prizeId;
		var t_settime;
		//点击抽奖
		$(".centerBg").click(function() {
			var t_link="pk"
			draw(t_skey, t_link, function(res) {
				prizeId = res["reward"].awardId;
			})

			ani();
		})

		function ani() {
			$(".prizeBg").removeClass("selected");
			$(".prizeBg").eq(t_array[t_index]).addClass("selected");
			var data_num = $(".prizeBg").eq(t_array[t_index]).attr("data-num");

			t_index++;
			if(t_index > t_array.length - 1) {
				t_index = 0;
				t_circle++;
			}

			if(t_circle == circle && prizeId == data_num) {
				clearTimeout(t_settime);
				return
			}

			t_settime = setTimeout(function() {
				ani()
			}, 200)

		}
	</script>

</html>